<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-user"></i>登陆</span>
      </div>
      <el-form
        label-position="left"
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码呀" prop="password">
          <el-input
            prefix-icon="el-icon-edit"
            placeholder="请输入密码"
            v-model="loginForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="rem">
          <el-checkbox
            label="记住密码"
            v-model="loginForm.rem"
            name="type"
          ></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button-group class="btn">
            <el-button @click="login" :loading="isLoading" type="info"
              ><i class="el-icon-key"></i>登陆</el-button
            >
            <el-button @click="btnReset" type="info"
              ><i class="el-icon-delete"></i>重置</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { api_login } from '../api/admin.js'
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        rem: true,
        isLoading: false
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在 4到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在 4到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    btnReset() {
      //1.获取表单对象
      // console.log(this.$refs.loginFormRef)
      //通过表单对象执行方法
      //this.$refs.loginFormRef.resetFields()  //这种也一样，都可以实现重置
      this.$refs['loginFormRef'].resetFields()
    },
    login() {
      //加载中
      this.loginForm.isLoading = true
      //验证表单
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          console.log('表单验证失败')
          return false
        }
        //提交表单
        const { data: result } = await api_login(
          this.loginForm.username,
          this.loginForm.password
        )
        this.loginForm.isLoading = false
        //console.log(result);
        // api_login(this.loginForm.username, this.loginForm.password).then(({data}) => {
        //     //请求得到响应，密码错误也是正常的响应
        //     console.log(data);
        // }).catch(err =>{
        //     console.log(err);
        // })

        //保存taken到sessionStorage

        if (result.code != 200) {
          this.$message.error(result.message)
          return true
        } else {
          this.$message.success(result.message)
          //保存用户信息到vuex中的store
          const data = result.data
          const token = data.tokenHead + data.token
          console.log('token是：：：：' + token)

          window.sessionStorage.setItem('token', token)

          //记住密码
          if (this.loginForm.rem) {
            this.$cookies.set('username', this.loginForm.username, '7D')
            this.$cookies.set('password', this.loginForm.password, '7D')
          } else {
            this.$cookies.remove('username')
            this.$cookies.remove('password')
          }
        }

        //登陆时从ocookies获取 在create()函数中
        //跳转到主页，编程式路由导航
        this.$router.replace('/home')
      })
    }
  },
  created() {
    this.loginForm.username = this.$cookies.get('username')
    this.loginForm.password = this.$cookies.get('password')
  }
}
</script>

<style scoped>
.btn {
  width: 100%;
}
.btn .el-button {
  width: 50%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: auto;
  width: 480px;
  transform: translateY(40%);
}
</style>
